<template>
  <div class="SourceCard">
    <div class="title">{{sourceInfo.goods}} - {{ sourceInfo.con_name }}</div>
    <div class="list">
      <div class="item">
        <div class="left"> <img class="img" src="@/assets/icon/car.png" alt="" srcset=""> 车型:</div>
        <div class="right">{{sourceInfo.models}}</div>
      </div>
      <div class="item">
        <div class="left"><img class="img" src="@/assets/icon/carlong.png" alt="" srcset="">车长:</div>
        <div class="right">{{sourceInfo.chechang}}</div>
      </div>
      <div class="item">
        <div class="left"><img class="img" src="@/assets/icon/price.png" alt="" srcset="">价格:</div>
        <div class="right">{{sourceInfo.huo_price}}元</div>
      </div>
      <div class="item">
        <div class="left"><img class="img" src="@/assets/icon/time.png" alt="" srcset="">装货时间:</div>
        <div class="right" style="font-size: 12px;">{{sourceInfo.add_time.slice(0,10)}}</div>
      </div>
      <div class="item">
        <div class="left"><img class="img" src="@/assets/icon/time.png" alt="" srcset="">卸货时间:</div>
        <div class="right" style="font-size: 12px;">{{sourceInfo.end_time.slice(0,10)}}</div>
      </div>
      <div class="item">
        <div class="left"><img class="img" src="@/assets/icon/name.png" alt="" srcset="">货物名称:</div>
        <div class="right">{{sourceInfo.goods}}</div>
      </div>
      <div class="item">
        <div class="left"><img class="img" src="@/assets/icon/area.png" alt="" srcset="">装货地:</div>
        <div class="right" :title="sourceInfo.ship_address">{{sourceInfo.ship_address}}</div>
      </div>
      <div class="item">
        <div class="left"><img class="img" src="@/assets/icon/area.png" alt="" srcset="">卸货地:</div>
        <div class="right" :title="sourceInfo.to_address">{{sourceInfo.to_address}}</div>
      </div>
      <div class="item">
        <div class="left"><img class="img" src="@/assets/icon/weight.png" alt="" srcset="">重量:</div>
        <div class="right">{{sourceInfo.weight}}(吨)</div>
      </div>
      <div class="item">
        <div class="left"><img class="img" src="@/assets/icon/phone.png" alt="" srcset="">联系方式:</div>
        <div class="right">{{sourceInfo.con_phone}}</div>
      </div>
    </div>
    <div class="tool" v-if="false">
      <el-button class="btn" size="small">查看详情</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "SourceCard",
  props: {
    sourceInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.initial();
  },
  methods: {
    async initial() {}
  }
};
</script>

<style lang="scss" scoped>
.SourceCard {
  min-height: 180px;
  width: 49%;
  background: #fff;
  border-radius: 10px;
  padding: 10px 20px;
  box-sizing: border-box;
  border: 1px solid #fff;
  margin: 20px 0 10px 0;

  &:hover {
    border: 1px solid $primaryColor;
    box-shadow: 0px 10px 20px 2px rgba(189, 189, 189, 0.3);
  }
  .title {
    font-size: 20px;
    font-weight: 700;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 30%;
      display: flex;
      align-items: center;
      font-size: 14px;
      margin-top: 10px;
      white-space:nowrap;
      overflow: hidden;
      .left {
        color: #999;
        margin-right: 10px;
        display: flex;
        align-items: center;
        .img{
          width: 22px;
          margin-right: 4px;
        }
      }
    }
  }
  .tool {
    display: flex;
    justify-content: flex-end;
    .btn {
      border: 1px solid $primaryColor;
      color: $primaryColor;
      &:hover {
        color: #fff;
        background: $primaryColor;
      }
    }
  }
  @media screen and (max-width: 767px) {
    width: 100%;
    .list {
      .item {
        width: 48%;
      }
    }
    .tool {
      margin-top: 10px;
    }
  }
}
</style>
